<script>
import apiNeed from "@/pages/v1/erp/Need/js/apiNeed";
import row from "muse-ui/es5/Grid/Row";
import TitleA from "@/comps/comm/TitleA.vue";
import EzBarCode from "@/comps/comm/EzBarCode.vue";

export default {
  name: "NeedPrint",
  components: {EzBarCode, TitleA},
  computed: {
    row() {
      return row
    }
  },
  data() {
    return {
      modelId:0,
      model:null,
      autoPrint:true,
    }
  },
  mounted() {
    this.modelId = this.$route.query.id*1
    this.getData()
  },
  methods:{
    getData(){
      apiNeed.findBy({
        _where:{id:this.modelId},
        _dumps:["status","formEmp","createEmp","needEmp","needDept","product",
          "product.product",
          "product.unit",
        ],
        page:1, limit:1,
      },res=>{
        if (res.length>0){
          this.model = res[0]
          if (this.autoPrint){
            this.$refs.printBtn.$el.click()
          }

        }else {
          this.$toast.error("数据不存在")
        }
      })
    }
  }
}
</script>

<template>
  <div class="bc13 padl10">
    <div class="flrc">
      <title-a class="flex1">打印预览</title-a>
      <mu-button color="primary" icon @click="goback(-1)">
        <mu-icon value="exit_to_app"></mu-icon>
      </mu-button>
    </div>
    <div class="">
      <div class="bcf pad10" id="needOrder" style="line-height: 2em" v-if="model">
        <div class="flrc bdbso bdc0 bdw3">
          <div class="fs14 fwb flex1">山东华腾采购申请单</div>
          <div class="">
            <EzBarCode :code="model.sn" :width="1"></EzBarCode>
          </div>
        </div>
        <mu-row>
          <mu-col :span="4">采购主题：{{model.title}}</mu-col>
          <mu-col :span="4">单据日期：{{$utils.str2date(model.formAt)}}</mu-col>
          <mu-col :span="4">单据编号：{{model.sn}}</mu-col>
          <mu-col :span="4" v-if="model.needEmp">需求员工：{{model.needEmp.name}}</mu-col>
          <mu-col :span="4" v-if="model.needDept">需求部门：{{model.needDept.name}}</mu-col>
          <mu-col :span="4">需求日期：{{$utils.str2date(model.needAt)}}</mu-col>
        </mu-row>
        <mu-row class="bdbso bdtso bdc0">
          <mu-col :span="1">序号</mu-col>
          <mu-col :span="3">名称</mu-col>
          <mu-col :span="1">数量</mu-col>
          <mu-col :span="1">单位</mu-col>
          <mu-col :span="6">备注</mu-col>
        </mu-row>
        <mu-row class="bdbso bdc0" v-for="(product,rowIndex) in model.product" :key="rowIndex">
          <mu-col :span="1">{{rowIndex+1}}</mu-col>
          <mu-col :span="3">
            <span v-if="product.product">{{product.product.name}}</span>
            <span v-else>NULL</span>
          </mu-col>
          <mu-col :span="1">{{product.num}}</mu-col>
          <mu-col :span="1">{{product.unit.name}}</mu-col>
          <mu-col :span="6">{{product.note}}</mu-col>
        </mu-row>
        <mu-row>
          <mu-col :span="3" :offset="6">
            制单：
            <span v-if="model.formEmp">{{model.formEmp.name}}</span>
            <span v-else>NULL</span></mu-col>
          <mu-col :span="3">制单时间：{{$utils.str2date(model.formAt)}}</mu-col>
        </mu-row>
      </div>
    </div>


    <div class="pad10 tac">
      <mu-button ref="printBtn" color="primary" v-print="'#needOrder'" flat>
        <mu-icon left value="print"></mu-icon>
        打印
      </mu-button>
      <mu-button color="primary"  @click="goback(-1)" flat>
        <mu-icon left value="exit_to_app"></mu-icon>
        返回
      </mu-button>
    </div>
  </div>
</template>

<style scoped>

</style>